<!--
   Copyright (C) 2012 by Jeremy P. White <jwhite@codeweavers.com>

   This file is part of spice-html5.

   spice-html5 is free software: you can redistribute it and/or modify
   it under the terms of the GNU Lesser General Public License as published by
   the Free Software Foundation, either version 3 of the License, or
   (at your option) any later version.

   spice-html5 is distributed in the hope that it will be useful,
   but WITHOUT ANY WARRANTY; without even the implied warranty of
   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
   GNU Lesser General Public License for more details.

   You should have received a copy of the GNU Lesser General Public License
   along with spice-html5.  If not, see <http://www.gnu.org/licenses/>.

   --------------------------------------------------
    Spice Javascript client template.
    Refer to main.js for more detailed information
   --------------------------------------------------
   S.Fairweather added addition functions to allow being called from external source and form for password.
-->
<!doctype html>
<html>
    <head>
        <title>Spice Javascript client</title>
        <base href="spice/">
        <link rel="stylesheet" type="text/css" href="./spice.css" />

        <!-- ES2015/ES6 modules polyfill -->
        <script type="module">
            window._spice_has_module_support = true;
        </script>
        <script>
            window.addEventListener("load", function() {
                if (window._spice_has_module_support) return;
                var loader = document.createElement("script");
                loader.src = "thirdparty/browser-es-module-loader/dist/" +
                    "browser-es-module-loader.js";
                document.head.appendChild(loader);
            });
        </script>
        <style>
            /* Password box */
            {box-sizing: border-box;}
            .form-popup { display: none; position: fixed; top: 50px; left: 15px; border: 3px solid #f1f1f1; z-index: 9; }
            .form-container { max-width: 300px; padding: 10px; background-color: white;}
            .form-container input[type=text], .form-container input[type=password] { width: 90%;  padding: 15px; border: none; background: #f1f1f1; }
            .form-container input[type=text]:focus, .form-container input[type=password]:focus {background-color: #ddd;outline: none; }
            .form-container .btn:hover, .open-button:hover { opacity: 1;  }
        </style>
        <script type="module" crossorigin="anonymous">
            import * as SpiceHtml5 from './src/main.js';
            window.connect = connect;
            var host = null, port = null;
            var sc;
            const queryString = window.location.search;
            const urlParams = new URLSearchParams(queryString);
            var auto = urlParams.get('autoconnect') ;
            var host = urlParams.get("host") ;
            var port = urlParams.get("port") ;
            var vmname = urlParams.get("vmname") ;
            var password = urlParams.get("password") ;
            if (vmname == null) {
                vmname = host ;
            } else {
                vmname = vmname + ' on host:' + host ;
            }
            document.getElementById("host").value = host ;
            document.getElementById("port").value = port;
            document.getElementById("password").value = password;
            document.getElementById('hostname').innerHTML = (vmname) ;
            if (auto === 'true' || auto == '1') {
            auto = true;
            setTimeout(connect, 3000);
            }
            function spice_error(e)
            {
                disconnect();
                if (e !== undefined && e.message === "Permission denied.") {
                    document.getElementById("passwordForm").style.display = "block";
                }
            }
            function connect()
            {
                var host, port, password, scheme = "ws://", uri;
                if (window.location.protocol == 'https:') {
                    scheme = "wss://";
                }
                host = document.getElementById("host").value;
                port = document.getElementById("port").value;
                password = document.getElementById("password").value;
                if ((!host) || (!port)) {
                    console.log("must set host and port");
                    return;
                }
                if (sc) {
                    sc.stop();
                }
                uri = scheme + host + port;
                document.getElementById('connectButton').innerHTML = "Stop Connection";
                document.getElementById('connectButton').onclick = disconnect;
                try
                {
                    sc = new SpiceHtml5.SpiceMainConn({uri: uri, screen_id: "spice-screen", dump_id: "debug-div",
                                message_id: "message-div", password: password, onerror: spice_error, onagent: agent_connected });
                }
                catch (e)
                {
                    alert(e.toString());
                    disconnect();
                }
            }
            function disconnect()
            {
                console.log(">> disconnect");
                if (sc) {
                    sc.stop();
                }
                document.getElementById('connectButton').innerHTML = "Start Connection";
                document.getElementById('connectButton').onclick = connect;
                if (window.File && window.FileReader && window.FileList && window.Blob)
                {
                    var spice_xfer_area = document.getElementById('spice-xfer-area');
                    if (spice_xfer_area != null) {
                      document.getElementById('spice-area').removeChild(spice_xfer_area);
                    }
                    document.getElementById('spice-area').removeEventListener('dragover', SpiceHtml5.handle_file_dragover, false);
                    document.getElementById('spice-area').removeEventListener('drop', SpiceHtml5.handle_file_drop, false);
                }
                console.log("<< disconnect");
            }
            function agent_connected(sc)
            {
                window.addEventListener('resize', SpiceHtml5.handle_resize);
                window.spice_connection = this;
                SpiceHtml5.resize_helper(this);
                if (window.File && window.FileReader && window.FileList && window.Blob)
                {
                    var spice_xfer_area = document.createElement("div");
                    spice_xfer_area.setAttribute('id', 'spice-xfer-area');
                    document.getElementById('spice-area').appendChild(spice_xfer_area);
                    document.getElementById('spice-area').addEventListener('dragover', SpiceHtml5.handle_file_dragover, false);
                    document.getElementById('spice-area').addEventListener('drop', SpiceHtml5.handle_file_drop, false);
                }
                else
                {
                    console.log("File API is not supported");
                }
            }
            document.getElementById('connectButton').onclick = connect();
            document.getElementById('sendCtrlAltDel').addEventListener('click', function(){ SpiceHtml5.sendCtrlAltDel(sc); });
        </script>
    </head>
    <body>
        <div id="login">
            <button onclick="open_nav()">&#9776; SPICE</button>
            <p id="hostname">Host Console</p>
        </div>
         <div id="Sidenav" class="SidenavClosed" style="width: 0;">
            <p class="closebtn" onclick="close_nav()">&#10006;</p>
            <label for="host">Host:</label> <input type='text' id='host' value='localhost'> <!-- localhost --><br>
            <label for="port">Port:</label> <input type='text' id='port' value='5959'><br>
            <label for="password">Password:</label> <input type='password' id='password' value=''><br>
            <button id="connectButton">Start Connection</button><br>
            <button id="sendCtrlAltDel">Send Ctrl-Alt-Delete</button>
            <button id="debugLogs">Toggle Debug Logs</button>
            <div id="message-div" class="spice-message" style="display: none;"></div>
            <div id="debug-div">
            <!-- If DUMPXXX is turned on, dumped images will go here -->
            </div>
        </div>
        <div id="spice-area">
            <div id="spice-screen" class="spice-screen"></div>
        </div>
        <div class="form-popup" id="passwordForm">
            <form action="/action_page.php" class="form-container">
              <h3>Spice requires a password.</h3>
              <input type="password" autocomplete="off" placeholder="Enter Password" id="psw" name="psw" required>
              <button type="button" class="btn cancel" onclick="connectpsw()">Connect</button>
            </form>
          </div>
        <script>
            function connectpsw() {
                document.getElementById("password").value = document.getElementById("psw").value;
                document.getElementById("passwordForm").style.display = "none";
                connect() ;
            }
            function show_debug_Logs() {
                var content = document.getElementById('message-div')
                if (content.style.display === 'block') {
                    content.style.display = 'none';
                } else {
                    content.style.display = 'block';
                }
            }
            function open_nav() {
                document.getElementById('Sidenav').className = 'SidenavOpen';
            }
            function close_nav() {
                document.getElementById('Sidenav').className = 'SidenavClosed';
            }
            document.getElementById('debugLogs').addEventListener('click', function() { show_debug_Logs(); });
        </script>
    </body>
</html>
